<template>
  <view class="content">
    <view class="top" :style="{ paddingTop: systemInfo.titleTop + 'px' }">
      <view class="main-title dispaly-center"
        :style="{ height: systemInfo.sBarHeight + 'px', lineHeight: systemInfo.sBarHeight + 'px' }">
        <view class="nav-top dispaly-just-between" :style="{ 'width': 750 - barWidth * 2 + 'rpx' }">
          <view class="tab">
            <tn-tabs v-model="currentTabIndex" bg-color="rgba(0,0,0,0)" :bottom-shadow="false" active-color="#000"
              active-font-size="40" :bar="false">
              <tn-tabs-item @click="changeTab(item)" v-for="(item, index) in tabsData" :key="index"
                :title="item.text" />
            </tn-tabs>
          </view>
          <view class="search" @click="navTo(`/subPackage/index/search`)">
            <tn-icon name="search" color="#000" size="40" />
          </view>
        </view>
      </view>
      <view class="cate w-100">
        <view class="item dispaly" @click="navTo(`/subPackage/index/selectCityPage`)">
          <view class="text">地域</view>
          <view class="s">
            <image src="/static/icon/s.png" />
          </view>
        </view>
        <view class="item dispaly" @click="cateOpen" v-if="changeType == 1">
          <view class="text">筛选</view>
          <view class="s">
            <image src="/static/icon/s.png" />
          </view>
        </view>
      </view>
    </view>
    <view class="list" :style="{ marginTop: topNavheight + 'px' }">
      <view v-if="changeType == 1">
        <!-- <Empty v-if="!loadShow && !jobListData.length" text="暂无职位" /> -->
        <jobCard :type="1" :data="jobListData" />
        <LoadMore :status="status" :show="loadShow" />

      </view>
      <view v-else>
        <!-- <Empty text="暂无单位" v-if="!cLoadShow && !companyListData.length" /> -->
        <dCard :data="companyListData" />
        <LoadMore :status="cStatus" :show="cLoadShow" />
      </view>
    </view>
    <!-- 地址 -->
    <!-- <SelectArea :tab="true" :show-popup="showPopup" @close="show => showPopup = show" /> -->
    <!-- 分类 -->
    <SelectCate v-if="jobCateListData.length" :data="jobCateListData" @confirm="confirm" :tab="true"
      :show-cate="cateShow" @close="(show: boolean) => cateShow = show" />
  </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import TnTabs from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs.vue'
import TnTabsItem from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs-item.vue'
import { ref, onMounted, reactive } from 'vue'
import SelectArea from '@/components/address/selectArea.vue';
import SelectCate from './components/selectCate.vue'
import { getElementHeight } from '@/utils/util'
import jobCard from '@/components/jobCard/jobCard.vue';
import dCard from '@/components/jobCard/dCard.vue'
import type { TabDataType } from '@/types/more'
import { onReachBottom, onPullDownRefresh, onLoad, onShow } from '@dcloudio/uni-app'
import { getJobList, getCompanyJobList, getJobCate } from '@/api/home/home'
import type { RequestJobParmType } from '@/types/requstParm'
import type { JobObjectDataType, CompanyObjectType, CateType } from '@/types/responseData'


onLoad(() => {
})

onShow(() => {
  selCityGetData()
})

// 选择地址请求列表
const selCityGetData = () => {
  queryData.city_id = ''
  cQueryData.city_id = ''
  let pages = getCurrentPages()
  let currPage = pages[pages.length - 1] as any //当前页
  let id = currPage.data.id
  if (id) {
    queryData.city_id = id
    cQueryData.city_id = id
    init()
    if (changeType.value == 1) {
      getListData()
    } else {
      getCompanyListData()
    }
    currPage.data.id = ''
  }
}

const currentTabIndex = ref<number>(0)
const tabsData = ref<Array<TabDataType>>([
  {
    text: '职位',
    type: 1
  },
  {
    text: '单位',
    type: 2
  }
])

// 获取职位列表
const queryData = reactive<RequestJobParmType>({
  page: 1,
  limit: 10,
  keywords: '',
  company_id: '',
  cat_name: '',
  city_id: '',
})

// 选择的职位分类
const confirm = (valueId: number) => {
  queryData.cat_name = valueId
  init()
  getListData()
}

// 请求职位列表
const status = ref<string>('loadmore')
const loadShow = ref<boolean>(false)
let jobListData = ref<Array<JobObjectDataType>>([])
const getListData = async () => {
  status.value = 'loading'
  const res = await getJobList(queryData)
  if (res.code == 0) {
    if (res.data.list.length) {
      status.value = 'loadmore'
      loadShow.value = true
      jobListData.value = [...jobListData.value, ...res.data.list]
    } else {
      status.value = 'nomore'
    }
  }
}

// 请求企业单位列表
const cQueryData = reactive<RequestJobParmType>({
  page: 1,
  limit: 10,
  keywords: '',
  city_id: '',
  user_id: 2
})
const cStatus = ref<string>('loadmore')
const cLoadShow = ref<boolean>(false)
let companyListData = ref<Array<CompanyObjectType>>([])
const getCompanyListData = async () => {
  cStatus.value = 'loading'
  const res = await getCompanyJobList(cQueryData)
  if (res.code == 0) {
    if (res.data.list.length) {
      cStatus.value = 'loadmore'
      cLoadShow.value = true
      companyListData.value = [...companyListData.value, ...res.data.list]
    } else {
      cStatus.value = 'nomore'
    }
  }
}

// 切换tab
const changeType = ref<number>(1)
const changeTab = (item: TabDataType) => {
  init()
  changeType.value = item.type
  if (changeType.value == 1) {
    getListData()
  } else {
    getCompanyListData()
  }
}

// 初始化
const init = () => {
  // loadShow.value = false
  // cLoadShow.value = false
  jobListData.value = []
  companyListData.value = []
  queryData.page = 1
  cQueryData.page = 1
}

// 获取职位分类
const jobCateListData = ref<Array<CateType>>([])
const getJobCateListData = async () => {
  const res = await getJobCate()
  if (res.code == 0) {
    jobCateListData.value = res.data
  }
}

// 分类弹窗
const cateShow = ref<boolean>(false)
const cateOpen = () => {
  cateShow.value = true
  uni.hideTabBar()
  getJobCateListData()
}

const systemInfo = uni.getStorageSync('systemInfo')
const { barWidth } = uni.getStorageSync('capsule')

// 获取top高度
const topNavheight = ref<number | unknown>(0)
onMounted(async () => {
  getListData()
  const height = await getElementHeight('.top')
  topNavheight.value = height
})

// 触底分页
onReachBottom(() => {
  if (changeType.value == 1) {
    (queryData.page as number)++
    getListData()
  } else {
    (cQueryData.page as number)++
    getCompanyListData()
  }

})

// 下拉刷新
onPullDownRefresh(async () => {
  uni.showLoading({
    title: '加载中'
  })
  queryData.city_id = ''
  cQueryData.city_id = ''
  queryData.cat_name = ''
  init()
  await getListData()
  await getCompanyListData()
  uni.stopPullDownRefresh()
  uni.hideLoading()
})

</script>

<style lang="scss" scoped>
.top {
  position: fixed;
  z-index: 999;
  top: 0;

  background: rgb(155, 227, 229);
  background: linear-gradient(180deg, rgba(155, 227, 229, 1) 0%, rgba(250, 250, 250, 1) 100%, rgba(250, 250, 250, 1) 100%);
}

.main-title {
  .nav-top {
    width: 50%;
  }
}

.cate {
  display: flex;
  justify-content: flex-end;
  padding-right: 30rpx;
  width: 750rpx;
  padding-bottom: 20rpx;

  .item:first-child {
    margin-right: 20rpx;
  }

  .item {
    background-color: #fff;
    border-radius: 10rpx;
    width: 96rpx;
    height: 50rpx;
    text-align: center;
    line-height: 50rpx;
    justify-content: center;

    .text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #717171;
    }

    .s {
      image {
        width: 15rpx;
        height: 15rpx;
      }
    }
  }
}

.list {
  padding: 30rpx;
}
</style>